<template>
  <div ref="print"
       class="-print box">
    <div class="preview"
         style="padding: 10px 0;">
      <div style="display: flex">
        <img style="float:left;height: 46px; width: 150px; margin: 10px 20px;"
             src="@/static/images/d_logo.png"
             alt="logo" />
        <div style="margin-top: 20px;width: 60%;">
          <div style="margin: 10px; line-height: 20px; text-align: center;">
            <label style="display: block; font-size:20px; font-weight:600">{{ customer.customerName }}</label>
          </div>
          <div style="margin: 10px; line-height: 16px; text-align: center;">
            <label style="display: block;">（{{isCarrier ? '承运方运单' : '发货方运单'}}）</label>
          </div>
        </div>
      </div>
      <div style="border: 2px solid var(--prev-border-color-lightgrey); margin: 0 15px"></div>
      <div style="border: 1px solid var(--prev-border-color-lightgrey); margin: 0 15px;margin-top: 5px"></div>
      <div style="margin: 15px 20px; line-height: 16px; display: flex; justify-content: space-between;">
        <label><span style="color:var(--prev-color-text-primary)">合同编号：</span>{{ waybillDetails.contractNo }}</label>
        <label>{{ customer.city === '市辖区' ? customer.province : customer.city }} --> {{ consignee.city === '市辖区' ? consignee.province : consignee.city}}</label>
      </div>
      <table cellspacing="0"
             cellpadding="5"
             height="200px"
             style="margin: 15px 20px; border-collapse: collapse; border-top: 1px solid var(--prev-border-color-lightgrey); border-left: 1px solid var(--prev-border-color-lightgrey); border-bottom: 0;">
        <tr>
          <td rowspan="5"
              width="3%"
              align="center"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            发货信息
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            发货方
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{customer.customerName}}
          </td>
          <td rowspan="5"
              width="3%"
              align="center"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            收货信息
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            收货方
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{consignee.consigneeName}}
          </td>
        </tr>
        <tr>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系人
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ customer.contactName }}
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系人
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ consignee.contactName }}
          </td>
        </tr>
        <tr>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系电话
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ customer.contactMobile }}
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系电话
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ consignee.contactMobile }}
          </td>
        </tr>
        <tr>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            发货时间
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ waybillDetails.fromTime }}
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            收货时间
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ waybillDetails.toTime }}
          </td>
        </tr>
        <tr>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            发货地址
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ customer.province }}{{ customer.city }}{{ customer.district }}{{ customer.address }}
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            收货地址
          </td>
          <td colspan="2"
              width="33%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{ consignee.province }}{{ consignee.city }}{{ consignee.district }}{{ consignee.address }}
          </td>
        </tr>
        <tr v-if="isCarrier">
          <td rowspan="2"
              width="3%"
              align="center"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            承运信息
          </td>
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            承运方
          </td>
          <td colspan="6"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{carrier.carrierName}}
          </td>
        </tr>
        <tr v-if="isCarrier">
          <td width="10%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系人
          </td>
          <td width="13%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{carrier.carrierContactName}}
          </td>
          <td style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            联系方式
          </td>
          <td colspan="4"
              width="30%"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{carrier.carrierContactMobile}}
          </td>
        </tr>
        <span v-if="transportRequirement.transportMode === 1">
          <tr>
            <td rowspan="4"
                width="3%"
                align="center"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输信息
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输模式
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.transportModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输方式
            </td>
            <td colspan="2"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.shipModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              计费模式
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.chargeModeDesc}}
            </td>
          </tr>
          <tr>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              计价单位
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.pricingUnitDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              货物分类
            </td>
            <td colspan="2"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.goodsCategoryDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              包装方式
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.packageModeDesc}}
            </td>
          </tr>
          <tr>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输要求
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{waybillDetails.ask}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              物品总价值(元)
            </td>
            <td colspan="4"
                width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{waybillCache.totalValue || 0}}
            </td>
          </tr>
        </span>
        <span v-else>
          <tr>
            <td rowspan="5"
                width="3%"
                align="center"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输信息
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输模式
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.transportModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              车型
            </td>
            <td colspan="2"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.vehicleTypeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              规格/车长
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.vehicleLength}}米
            </td>
          </tr>
          <tr>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输方式
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.shipModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              计费模式
            </td>
            <td colspan="2"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.chargeModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              计价单位
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.pricingUnitDesc}}
            </td>
          </tr>
          <tr>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              货物分类
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.goodsCategoryDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              包装方式
            </td>
            <td colspan="2"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{transportRequirement.packageModeDesc}}
            </td>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              物品总价值(元)
            </td>
            <td width="13%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{waybillCache.totalValue || 0}}
            </td>
          </tr>
          <tr>
            <td width="10%"
                style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              运输要求
            </td>
            <td colspan="6"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{waybillDetails.ask}}
            </td>
          </tr>
        </span>
        <tr>
          <td width="15%"
              style="color:var(--prev-color-text-primary);font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            备注
          </td>
          <td colspan="6"
              style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
            {{waybillDetails.desc}}
          </td>
        </tr>
      </table>
      <div style="margin: 20px 20px 0;font-weight:500">货物信息：</div>
      <table cellspacing="0"
             cellpadding="5"
             height="200px"
             style="margin: 15px 20px; border-collapse: collapse; border-top: 1px solid var(--prev-border-color-lightgrey); border-left: 1px solid var(--prev-border-color-lightgrey); border-bottom: 0;">
        <thead>
          <tr>
            <th width="5%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              序号
            </th>
            <th width="8%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              物料编码
            </th>
            <th width="19%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              物品名称
            </th>
            <th width="8%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              规格
            </th>
            <th width="7%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              重量<br />(公斤)
            </th>
            <th width="7%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              体积<br />(方)
            </th>
            <th width="7%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              物品数
            </th>
            <th width="7%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              实签数
            </th>
            <th width="7%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              异常数
            </th>
            <th width="10%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              异常分类
            </th>
            <th width="8%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              异常描述
            </th>
            <th width="6%"
                style="font-size:12px; font-weight: normal; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              批次
            </th>
          </tr>
        </thead>
        <tbody v-if="waybillDetails">
          <tr v-for="(item, index) in waybillDetails.goodsList"
              :key="index">
            <td width="5%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{ ['补差','合计'].includes(item.materialCode) ? '' : index + 1 }}
            </td>
            <td width="8%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{ item.materialCode }}
            </td>
            <td width="19%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{ item.goodsTypeName }}
            </td>
            <td width="10%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.spec }}
            </td>
            <td width="7%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.totalWeight || 0}}
            </td>
            <td width="7%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.totalVolume || 0}}
            </td>
            <td width="7%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.quantity}}
            </td>
            <td width="7%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.signQuantity}}
            </td>
            <td width="7%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.exceptionQuantity}}
            </td>
            <td width="10%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              <span v-if="item.exceptionQuantity && Array.isArray(item.exceptionText)">
                <template v-for="(ele, i) in item.exceptionText">
                  <span :key="i">{{ele}}</span>
                </template>
              </span>
              <!-- <span v-else>{{item.exceptionText}}</span> -->
            </td>
            <td width="8%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.remarks}}
            </td>
            <td width="6%"
                style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.batchNo}}
            </td>
          </tr>
        </tbody>
      </table>
      <div style="margin: 20px; line-height: 22px;">
        <label style="display: block;">注意事项：</label>
        <span class="detail-text"
              style="display: inline-block; font-size:12px;">一、发货方托运的货物如实填写，不得隐瞒货物名称、数量及性质，不得在托运货物内夹带危险品、禁运物品。否则承运方在运输途中为此造成
          损失均由甲方负责。 <br />
          二、发货方若不跟人押车，卸货地址务必填清，货物包装必须完整无损，承运方按卸货地址给予按期，完整无缺运到和办理交接手续，否则造成
          损失各负其责。 <br />
          三、发货方托运货物时、必须参加保险，如不参加保险，出现货损、货差由发货方自负。
        </span>
      </div>
      <div style="margin: 20px;">
        <el-col :span="8">
          <label>核对人: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;"></span>
        </el-col>
        <el-col :span="8">
          <label>签收人: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;">
            {{ status > 30 ? consignee.contactName : "" }}
          </span>
        </el-col>
        <el-col :span="8">
          <label>签收时间: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;">
            {{ status > 30 ? waybillDetails.sign && waybillDetails.sign.signAtAmend : "" }}
          </span>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import { transport } from "@/api/index";
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "TransportPrint",
  data () {
    return {
      waybillDetails: {},
      customer: {},
      consignee: {},
      carrier: {},
      transportRequirement: {},
      waybillCache: {}
    };
  },
  computed: {
    waybillId () {
      return Number(this.$route.query.waybillId);
    },
    status () {
      return Number(this.$route.query.status);
    },
    isCarrier () {
      return Number(this.$route.query.carrier);
    }
  },
  created () {
    this.getDetail();
  },
  mounted () {
    setTimeout(() => {
      this.print();
    }, 1000);
  },
  methods: {
    async getDetail () {
      let { data } = await transport.getDetail(this.waybillId);
      let { customer, consignee, carrier, fromAddress, fromContact, toAddress, toContact, waybillCache, transportRequirement } = data;
      this.waybillDetails = data;
      this.consignee = Object.assign(consignee, toContact, toAddress);
      this.customer = Object.assign(customer, fromContact, fromAddress);
      this.carrier = carrier || {};
      this.transportRequirement = transportRequirement;
      let ask = [];
      if (transportRequirement.pick) { ask.push('提货') }
      if (transportRequirement.deliver) { ask.push('送货') }
      if (transportRequirement.onLoad) { ask.push('装货') }
      if (transportRequirement.offLoad) { ask.push('卸货') }
      if (transportRequirement.insure) { ask.push('保价') }
      if (ask.length) {
        this.waybillDetails.ask = ask.join("、")
      }
      this.waybillCache = waybillCache;
      this.waybillCache.totalValue = waybillCache.totalValue ? returnThousandDigit(waybillCache.totalValue, 2) : 0;
      //后台不返 物品信息字段，前端自行填充
      this.waybillDetails.goodsList.forEach((item) => {
        let obj = {
          signQuantity: this.status > 30 ? item.quantity : null,
          exceptionText: "",
          totalWeight: Number((item.quantity * item.weight).toFixed(2)),
          totalVolume: Number((item.quantity * item.volume).toFixed(2)),
          exceptionQuantity: null,
          remarks: ""
        };

        Object.assign(item, obj);
        if (this.status === 30) {
          item.goodsSign = obj;
        } else if (this.status === 40) {
          Object.assign(item, this.exceptionListData(item.goodsSign));
          item.signQuantity = item.goodsSign.quantity;
          item.exceptionQuantity = item.goodsSign.exceptionQuantity;
          item.remarks = item.goodsSign.exceptionDesc;
          item.exceptionText = this.exceptionText(item.goodsSign);
        } else {
          //实签数量 没有签收数据取物品数量，没有回单数据就取签收数量，有回单数据取回单数量
          if (item.goodsReceipt) {
            item.signQuantity = item.goodsReceipt.quantity;
            item.exceptionQuantity = item.goodsReceipt.exceptionQuantity;
            item.remarks = item.goodsReceipt.exceptionDesc;
            item.exceptionText = this.exceptionText(item.goodsReceipt);
            Object.assign(item, this.exceptionListData(item.goodsReceipt));
          } else if (item.goodsSign) {
            item.signQuantity = item.goodsSign.quantity;
            item.exceptionQuantity = item.goodsSign.exceptionQuantity;
            item.exceptionText = this.exceptionText(item.goodsSign);
            item.remarks = item.goodsSign.exceptionDesc;
            Object.assign(item, this.exceptionListData(item.goodsSign));
          } else {
            item.signQuantity = this.status > 30 ? item.quantity : null;
          }
        }
      });

      let signQuantity = 0; //物品实签数量
      let exceptionQuantity = 0;
      this.waybillDetails.goodsList.forEach((item) => {
        signQuantity += Number(item.signQuantity || 0); //实签数量
        exceptionQuantity += Number(item.exceptionQuantity); //异常数量
      });
      let totalList = [
        {
          materialCode: "补差",
          totalVolume: waybillCache.volumeAddition,
          totalWeight: waybillCache.weightAddition
        },
        {
          materialCode: "合计",
          quantity: waybillCache.totalQuantity,
          totalVolume: waybillCache.calculateVolume,
          totalWeight: waybillCache.calculateWeight,
          signQuantity: this.status > 30 ? signQuantity : null,
          exceptionQuantity: this.status > 30 ? exceptionQuantity : null,
        }
      ];
      this.waybillDetails.goodsList = [...this.waybillDetails.goodsList, ...totalList];
    },
    exceptionListData (data) {
      let list = JSON.parse(JSON.stringify(data));
      delete list.quantity;
      return list;
    },
    exceptionText (data) {
      let { damageQuantity, lackQuantity, loseQuantity, otherQuantity } = data;
      return [
        `缺少${lackQuantity},`, `丢失${loseQuantity},`, `破损${damageQuantity},`, `其他${otherQuantity}`
      ];
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
};
</script>

<style scoped>
@media print {
  @page {
    size: auto A4 landscape;
    margin: 6mm 1mm;
  }
  html {
    background-color: var(--prev-bg-white);
    height: auto;
    margin: 0px;
  }
  .preview >>> label.labelSty,
  .preview >>> .detail-text {
    font-size: 14px;
    margin-bottom: 3px;
    font-weight: 400;
  }
  table tr.lastrow td {
    border-bottom: 0;
  }
  td.lastCol {
    border-right: 0;
  }
  th.lastCol {
    border-right: 0;
  }
}
@media screen {
  .box {
    display: none;
  }
}
</style>
